<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>智能创作平台</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.js"></script>
    <script src="js/time.js"></script>
    <!--google fonts-->
    <link href="css/css2" rel="stylesheet">
    <!-- Boxicons -->
    <link href="css/boxicons.min.css" rel="stylesheet">
    <!-- insha style css-->
    <link rel="stylesheet" href="css/insha-style.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/platform.css">
    <link rel="stylesheet" href="css/all_header.css">

</head>


<body>
<!-- main wrapper -->
<div class="main">
    <div class="sidebar">
        <div class="logo_content">
            <div class="logo">
                <div class="logo_name">
                    <a href="">
                        <i class="bx bx-meteor"></i>
                        智能创作平台
                    </a>
                </div>
            </div>
            <i class="bx bx-menu" id="toggle-menu-btn"></i>
        </div>
        <ul class="nav_list">
            <li>
                <i class="bx bx-search search-btn"></i>
                <input type="text" placeholder="搜索...">
                <span class="tooltip">搜索</span>
            </li>
            <li>
                <a href="/platform">
                    <i class="bx bx-grid-alt"></i>
                    <span class="links_name">创作中心</span>
                </a>
                <span class="tooltip">创作中心</span>
            </li>
            <li>
                <a href="/userInfo">
                    <i class="bx bx-user"></i>
                    <span class="links_name">用户信息</span>
                </a>
                <span class="tooltip">用户信息</span>
            </li>
            <li>
                <a href="/history">
                    <i class="bx bx-history"></i>
                    <span class="links_name">创作历史</span>
                </a>
                <span class="tooltip">创作历史</span>
            </li>
            <li>
                <a href="/trash">
                    <i class="bx bx-recycle"></i>
                    <span class="links_name">回收站</span>
                </a>
                <span class="tooltip">回收站</span>
            </li>
            <li>
                <a href="/help">
                    <i class="bx bx-help-circle"></i>
                    <span class="links_name">帮助文档</span>
                </a>
                <span class="tooltip">帮助文档</span>
            </li>


        </ul>
        <div class="profile_content">
            <div class="profile">
                <div class="profile_details">
                    <img src="images/logo.jpg" alt="profile">
                    <div class="name_job">
                        <div class="name">版权所有</div>
                        <div class="job">中国矿业大学</div>
                    </div>
                </div>
                <i class="bx bx-log-out" id="log_out" onclick="userExit()" style="cursor: pointer"></i>
            </div>
        </div>
    </div>

    <script>
        function userExit(){
            var exitOrNot = confirm("确认退出吗，账号将注销");
            if (exitOrNot === true){
                window.location.href="/exit";
            } else  {
            }
        }
    </script>

    <div class="home_content" style="overflow:auto;">
        <div class="all_header">
            <div class="top_container">
                <div class="page_title">创作历史</div>
                <div class="ts">
                    <span class="hello">尊敬的</span>
                    <span class="hello" th:text="${session.user.name}" onclick="window.location.href='/userInfo'" style="cursor: pointer"></span>
                    <span class="hello">，现在是</span>
                    <span class="date"></span>
                    <span class="second"></span>
                </div>
            </div>
        </div>
        <div class="split"></div>
        <div class="slipNav">
            <nav>
                <a href="/history" class="selected">全部</a>
                <a href="javascript:;">最近保存</a>
                <a onclick="showFavor()">我的收藏</a>
                <script>
                    function showFavor() {
                        $.ajax({
                            url: "/history/showFavor",
                            type: "post",
                            data: {},
                            async: false,
                            dataType: "json",
                            success:function (data){
                                let ul = document.querySelector('.list ul');
                                while(ul.hasChildNodes()) //当div下还存在子节点时 循环继续
                                {
                                    ul.removeChild(ul.firstChild);
                                }
                                console.log(data.total);
                                for (var i = 0;i<data.total;i++) {
                                    let flag_now_his = i;
                                    let li = document.querySelector('.list ul li');
                                    let liItems = document.createElement('li');
                                    let spanOne = document.createElement('span');
                                    let spanTwo = document.createElement('span');
                                    let spanThree = document.createElement('span');

                                    let text = document.createElement('div');
                                    let title = document.createElement('div');
                                    text.innerHTML=data.his[i].originText;
                                    title.innerHTML=data.his[i].title+"<br><hr><br>"+data.his[i].summary;

                                    text.setAttribute('style','white-space: pre-wrap');
                                    title.setAttribute('style','white-space: pre-wrap');

                                    let soText = document.createTextNode('下载');
                                    let stText = document.createTextNode('删除');
                                    let sfText = document.createTextNode('取消收藏');

                                    spanOne.appendChild(soText);
                                    spanTwo.appendChild(stText);
                                    spanThree.appendChild(sfText);

                                    spanOne.setAttribute('class','first');
                                    spanTwo.setAttribute('class','second');
                                    spanThree.setAttribute('class','third');

                                    liItems.appendChild(text);
                                    liItems.appendChild(title);
                                    liItems.appendChild(spanOne);
                                    liItems.appendChild(spanTwo);
                                    liItems.appendChild(spanThree);


                                    ul.appendChild(liItems);
                                    spanOne.addEventListener('click',() =>{
                                        var save_or_not = confirm("确认下载至本地吗？");
                                        if (save_or_not === true){
                                            let concat_originText=text.innerHTML;
                                            let concat_title = title.innerHTML;
                                            let result_text = "原始文本:\n"+concat_originText+"\n\n生成的标题:\n"+concat_title;
                                            let split_array = result_text.split("<br><hr><br>");
                                            result_text = split_array.join("\n\n生成的摘要:\n");
                                            let downloadName = "history" + new Date().getTime();
                                            downloadByBlob(downloadName,result_text);
                                            console.log(result_text);
                                            //通过FileReader转化为base64字符串下载
                                            function downloadByBlob (fileName, content) {
                                                let blob = new Blob([content], {
                                                    type: "text/plain;charset=utf-8"
                                                });
                                                let reader = new FileReader();
                                                reader.readAsDataURL(blob);
                                                reader.onload = function(e) {
                                                    let a = document.createElement('a');
                                                    a.download = fileName;
                                                    a.href = e.target.result;
                                                    document.body.appendChild(a);
                                                    a.click();
                                                    document.body.removeChild(a);
                                                }
                                            }
                                        } else {

                                        }
                                    });
                                    spanTwo.addEventListener('click',() =>{
                                        var del_or_not = confirm("确认删除吗？");
                                        if (del_or_not === true){
                                            $.ajax({
                                                url:"/history/del",
                                                type:"GET",
                                                data:{
                                                    is_delete: 1,
                                                    flag_now_his: flag_now_his,
                                                },
                                                resultType:"JSON",
                                                success:function (result){
                                                    if (result.code === 200) {
                                                        alert(result.message);
                                                    } else {
                                                        alert(result.message);
                                                    }
                                                },
                                                error:function (result){
                                                    alert(result.message);
                                                }
                                            });
                                            liItems.style.display="none";
                                        } else  {

                                        }
                                    });

                                    spanThree.addEventListener('click',() =>{
                                        var del_or_not = confirm("确认取消收藏吗？");
                                        if (del_or_not === true){
                                            $.ajax({
                                                url:"/history/favor_cancel",
                                                type:"GET",
                                                data:{
                                                    is_favor: 0,
                                                    flag_now_his: flag_now_his,
                                                },
                                                resultType:"JSON",
                                                success:function (result){
                                                    if (result.code === 200) {
                                                        alert(result.message);
                                                    } else {
                                                        alert(result.message);
                                                    }
                                                },
                                                error:function (result){
                                                    alert(result.message);
                                                }
                                            });
                                            liItems.style.display="none";
                                        } else  {

                                        }
                                    });
                                }
                            }
                        })
                    }
                </script>

                <!-- 底部线条 -->
                <div class="line"></div>
                <!-- 背景滑块 -->
                <div class="bgc"></div>
                <a href="/history">刷新</a>
            </nav>
        </div>

        <div class="list">
            <ul>
            </ul>
        </div>
    </div>


</div>


<!--custom js-->
<script src="js/sidebar.js"></script>
<style>
    .list ul li{
        margin-left: 5vh;
        margin-right: 5vh;margin-top: 5px;

        width: 95%;
        height: auto;
        border: solid rgb(183,184,181);
        float: inherit;
        background-color: white;
        padding: 5px;
        overflow: hidden;

    }
    .list ul li:hover{
        transform: scale(1.05);
    }

    .list ul li span{
        padding: 10px;

        background: #eee;
        border-radius: 3px;
        margin: 5px;
        color: white;
        display: inline-block;
        float: right;
        margin-top: 15px;
        cursor: pointer;

    }
    .list ul li span.first{
        background: #ffac13;
    }
    .list ul li span.second{
        background: #b11717;
    }

    .list ul li span.third{
        background: #ffac13;
    }

    .list ul li div{
        float: left;
        width:50%;
        height:auto;
    }


    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-color: rgb(221, 230, 245);
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    .slipNav {
        width: 95%;
        margin: 2px auto;
    }

    .slipNav a {
        position: relative;
        float: left;
        width: 150px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        color: #000;
        z-index: 1;
    }

    .slipNav nav {
        position: relative;
        background-color: white;
        border-radius: 20px;
    }

    .slipNav nav::after {
        content: '';
        display: block;
        clear: both;
    }

    .slipNav nav :hover {
        color: #54a0ff;
    }

    .selected {
        color: white !important;
    }

    .line {
        position: absolute;
        top: 50px;
        left: 35px;
        /* 线的长宽 */
        height: 3px;
        width: 80px;
        background-color: #54a0ff;
        transition: all .3s;
    }

    .bgc {
        position: absolute;
        top: 0px;
        left: 27px;
        /* 线的长宽 */
        height: 50px;
        width: 90px;
        border-radius: 50px;
        background-color: rgb(84, 126, 233);
        transition: all .3s;
    }

</style>
<script>
    let line = document.querySelector('.line');
    let slipNav = document.querySelector('.slipNav nav');
    let slipAll = document.querySelectorAll('.slipNav nav a');
    //给所有的a标签添加index属性，方便后面查找
    for (let i = 0; i < slipAll.length; i++) {
        slipAll[i].setAttribute('data-index', i)
    }
    //鼠标移入底下的线跟着移动
    slipNav.addEventListener('mouseover', function (e) {
        let target = e.target
        let len = 150 * target.dataset.index + 35;// 计算当前的left值
        line.style.left = len + 'px';
    })
    //鼠标移出时底下的线回到原来的位置
    slipNav.addEventListener('mouseleave', function (e) {
        let selected = document.querySelector('.slipNav .selected')
        let len = 150 * selected.dataset.index + 35 // 线回到被选择元素的位置
        line.style.left = len + 'px'
    })
    //鼠标点击时背景颜色的滑块滑倒相应的位置
    slipNav.addEventListener('click', function (e) {
        let target = e.target;
        let bgc = document.querySelector('.bgc')
        //排他思想
        for (let i = 0; i < slipAll.length; i++) {
            slipAll[i].classList.remove('selected')
        }
        target.classList.add('selected');// 通过添加类名实现颜色变化
        let len = 150 * target.dataset.index + 25 // 计算背景滑块left值
        bgc.style.left = len + 'px';
    })



</script>
<script>
    $.ajax({
        url: "/history",
        type: "post",
        data: {},
        async: false,
        dataType: "json",
        success:function (data){
            let ul = document.querySelector('.list ul');


            console.log(data.total);
            for (var i = 0;i<data.total;i++) {
                let flag_now_his = i;
                let li = document.querySelector('.list ul li');
                let liItems = document.createElement('li');
                let spanOne = document.createElement('span');
                let spanTwo = document.createElement('span');
                let spanThree = document.createElement('span');

                let text = document.createElement('div');
                let title = document.createElement('div');
                text.innerHTML=data.his[i].originText;
                title.innerHTML=data.his[i].title+"<br><hr><br>"+data.his[i].summary;

                text.setAttribute('style','white-space: pre-wrap');
                title.setAttribute('style','white-space: pre-wrap');

                let soText = document.createTextNode('下载');
                let stText = document.createTextNode('删除');
                let sfText = document.createTextNode('收藏');

                spanOne.appendChild(soText);
                spanTwo.appendChild(stText);
                spanThree.appendChild(sfText);

                spanOne.setAttribute('class','first');
                spanTwo.setAttribute('class','second');
                spanThree.setAttribute('class','third');

                liItems.appendChild(text);
                liItems.appendChild(title);
                liItems.appendChild(spanOne);
                liItems.appendChild(spanTwo);
                liItems.appendChild(spanThree);


                ul.appendChild(liItems);
                spanOne.addEventListener('click',() =>{
                    var save_or_not = confirm("确认下载至本地吗？");
                    if (save_or_not === true){
                        let concat_originText=text.innerHTML;
                        let concat_title = title.innerHTML;
                        let result_text = "原始文本:\n"+concat_originText+"\n\n生成的标题:\n"+concat_title;
                        let split_array = result_text.split("<br><hr><br>");
                        result_text = split_array.join("\n\n生成的摘要:\n");
                        let downloadName = "history" + new Date().getTime();
                        downloadByBlob(downloadName,result_text);
                        console.log(result_text);
                        //通过FileReader转化为base64字符串下载
                        function downloadByBlob (fileName, content) {
                            let blob = new Blob([content], {
                                type: "text/plain;charset=utf-8"
                            });
                            let reader = new FileReader();
                            reader.readAsDataURL(blob);
                            reader.onload = function(e) {
                                let a = document.createElement('a');
                                a.download = fileName;
                                a.href = e.target.result;
                                document.body.appendChild(a);
                                a.click();
                                document.body.removeChild(a);
                            }
                        }
                    } else {

                    }
                });
                spanTwo.addEventListener('click',() =>{
                    var del_or_not = confirm("确认删除吗？");
                    if (del_or_not === true){
                        $.ajax({
                            url:"/history/del",
                            type:"GET",
                            data:{
                                is_delete: 1,
                                flag_now_his: flag_now_his,
                            },
                            resultType:"JSON",
                            success:function (result){
                                if (result.code === 200) {
                                    alert(result.message);
                                } else {
                                    alert(result.message);
                                }
                            },
                            error:function (result){
                                alert(result.message);
                            }
                        });
                        liItems.style.display="none";
                    } else  {

                    }
                });

                spanThree.addEventListener('click',() =>{
                    var del_or_not = confirm("确认收藏吗？");
                    if (del_or_not === true){
                        $.ajax({
                            url:"/history/favor",
                            type:"GET",
                            data:{
                                is_favor: 1,
                                flag_now_his: flag_now_his,
                            },
                            resultType:"JSON",
                            success:function (result){
                                if (result.code === 200) {
                                    alert(result.message);
                                } else {
                                    alert(result.message);
                                }
                            },
                            error:function (result){
                                alert(result.message);
                            }
                        });
                    } else  {

                    }
                });
            }
        }
    })
</script>
</body>
</html>